<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录</title>
        <link rel="stylesheet" href="{{ url_for('static',filename='css/bootstrap.min.css')}}" />
        <link rel="stylesheet" href="{{ url_for('static',filename='css/login.css')}}" />
		<link rel="preconnect" href="https://fonts.gstatic.com">
		<link href="https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&display=swap" rel="stylesheet">
		<script src="{{ url_for('static',filename='js/jquery.min.js')}}"></script>
		<script src="{{ url_for('static',filename='js/popper.min.js')}}"></script>
		<script src="{{ url_for('static',filename='js/bootstrap.min.js')}}"></script>
	</head>
	<body>

		<div class="login">
            <span>爬虫管理登录</span>
            <input name="username" id="un" type="text" placeholder="输入用户名：">
            <input name="password" id="pw" type="password" placeholder="输入密码：">
			<button type="button" data-toggle="modal" data-target="#myModal1" onclick="">注册</button>
            <button type="button" onclick="login()">登录</button>
        </div>

			<!-- 模态框 -->
<div class="modal fade" id="myModal1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">

      <!-- 模态框头部 -->
      <div class="modal-header">
        <h4 class="modal-title">注册</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- 模态框主体 -->
      <div class="modal-body">
          <input name="re_username" id="re_un" type="text" placeholder="输入用户名：">
          <input name="re_password" id="re_pw" type="password" placeholder="输入密码：">
          <input name="re_password_s" id="re_pw_s" type="password" placeholder="确认密码：">
      </div>

      <!-- 模态框底部 -->
      <div class="modal-footer">
          <button type="button" class="btn btn-ok" data-dismiss="modal" onclick="register()">确定</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>

    </div>
  </div>
</div>

		<script type="text/javascript">

			function register(){
			    var re_username=document.getElementById('re_un').value;
			    var re_password=document.getElementById('re_pw').value;
			    var re_password_s=document.getElementById('re_pw_s').value;

			    if(re_password != re_password_s)
			    {
			        alert("注册失败！密码验证输入失败");
			        return;
			    }

			    if(re_username.length == 0 || re_password.length == 0 || re_password_s.length == 0)
			    {
			        alert("注册失败！信息输入不全");
			        return;
			    }

                var data={
					're_username':re_username,
					're_password':re_password,
					're_password_s':re_password_s
				};

				$.ajax({
							type: "post",
							url: '/register',
							dataType: 'json',
							data: JSON.stringify(data),
							contentType: 'application/json;charset=UTF-8',//编码格式
							success: function (response) {
								if(response.data != 'undefined' && response.data == 'success')
								{
                                    alert("注册成功！");
								}
								else
								{
									alert("注册失败！:用户名已存在");
								}
							},
							error: function(xhr, type) {
								console.log(xhr);
    						}
				});
			}

			function login(){

			    var username=document.getElementById('un').value;
			    var password=document.getElementById('pw').value;

			    if(username.length == 0 || password.length == 0)
			    {
			        alert("登录失败！信息输入不全");
			        return;
			    }

				var data={
					'username':username,
					'password':password
				};

				$.ajax({
							type: "post",
							url: '/login',
							dataType: 'json',
							data: JSON.stringify(data),
							contentType: 'application/json;charset=UTF-8',//编码格式
							success: function (response) {
								if(response.data != 'undefined' && response.data == 'success')
								{
									console.log(data.username);
									window.location.href="{{ url_for('index',username='ASDFG') }}".replace("ASDFG", data.username);
								}
								else
								{
									alert("登录失败！:用户名或密码不正确")

								}
							},
							error: function(xhr, type) {
								console.log(xhr);
    						}
				});
			}

		</script>
	</body>
</html>